<template>
    <div class="wrapper">
        <div class="details">
            <el-descriptions :column="3" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <tickets />
                            </el-icon>
                            档案编号
                        </div>
                    </template>
                    430000101589
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <Clock />
                            </el-icon>
                            建档时间
                        </div>
                    </template>
                    2024-12-12 13:50
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <Clock />
                            </el-icon>
                            更新时间
                        </div>
                    </template>
                    2024-12-12 13:50
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <user />
                            </el-icon>
                            监护责任人
                        </div>
                    </template>
                    周某某
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <user />
                            </el-icon>
                            网格责任人
                        </div>
                    </template>
                    周某某
                </el-descriptions-item>
            </el-descriptions>
        </div>

        <div class="items-wrapper">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>学籍信息</span>
                    </div>
                </template>
                <div>
                    <el-descriptions title="" direction="vertical" :column="4" border>
                        <el-descriptions-item label="姓名">kooriookami</el-descriptions-item>
                        <el-descriptions-item label="学籍号">18100000000</el-descriptions-item>
                        <el-descriptions-item label="学校名称">Suzhou</el-descriptions-item>
                        <el-descriptions-item label="班级名称">
                            School
                        </el-descriptions-item>
                        <el-descriptions-item label="主管教育局">Province</el-descriptions-item>
                        <el-descriptions-item label="民族">Province</el-descriptions-item>
                        <el-descriptions-item label="户口信息">Province</el-descriptions-item>
                        <el-descriptions-item label="住址">Province</el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-card>

            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>户籍信息</span>
                    </div>
                </template>
                <div>
                    <el-descriptions title="" direction="vertical" :column="3" border>
                        <el-descriptions-item label="姓名">kooriookami</el-descriptions-item>
                        <el-descriptions-item label="身份证号">18100000000</el-descriptions-item>
                        <el-descriptions-item label="性别">Suzhou</el-descriptions-item>
                        <el-descriptions-item label="年龄">
                            School
                        </el-descriptions-item>
                        <el-descriptions-item label="籍贯">Province</el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-card>

            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>民政救济信息</span>
                    </div>
                </template>
                <div>
                    <el-descriptions title="" direction="vertical" :column="3" border>
                        <el-descriptions-item label="救助类型">kooriookami</el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-card>

            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>医卫健康信息</span>
                    </div>
                </template>
                <div>
                    <el-descriptions title="" direction="vertical" :column="3" border>
                        <el-descriptions-item label="抑郁焦虑史">kooriookami</el-descriptions-item>
                        <el-descriptions-item label="性侵猥亵史">18100000000</el-descriptions-item>
                        <el-descriptions-item label="虐待史">Suzhou</el-descriptions-item>
                        <el-descriptions-item label="被遗弃">
                            School
                        </el-descriptions-item>
                        <el-descriptions-item label="自残自杀史">Province</el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-card>

            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>人像信息</span>
                    </div>
                </template>
                <div>
                    <el-carousel indicator-position="outside" height="150px">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <div class="el-carousel-item-photos">
                                <img src="@/assets/1.webp" />
                                <img src="@/assets/2.webp" />
                                <img src="@/assets/3.webp" />
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </el-card>

            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>治安与违法信息</span>
                    </div>
                </template>
                <div>
                    <el-descriptions title="" direction="vertical" :column="3" border>
                        <el-descriptions-item label="未成年人偷盗史">kooriookami</el-descriptions-item>
                        <el-descriptions-item label="未成年人聚众斗殴史">18100000000</el-descriptions-item>
                        <el-descriptions-item label="未成年人性侵史">Suzhou</el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { Clock, Tickets, User } from "@element-plus/icons-vue";
</script>

<style lang="less" scoped>
.wrapper {
    height: 100%;
}

.details {
    padding: 15px;
}

.el-descriptions {
    background: #fff !important;
}

.items-wrapper {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.el-carousel-item-photos {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.el-carousel-item-photos img {
    height: 160px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.cell-item .el-icon {
    margin-top: 2px;
    margin-right: 6px;
}
</style>
